<template>
    <div>
<div id="contain">
                <div class="wrap" id="wrap1">
                    <div class="part" id="part1"></div>
                </div>
                <div class="wrap" id="wrap2">
                    <div class="part" id="part2"></div>
                </div>
                <div class="wrap" id="wrap3">
                    <div class="part" id="part3"></div>
                </div>
                <div class="wrap" id="wrap4">
                    <div class="part" id="part4"></div>
                </div>
            </div>
    </div>
</template>
<script>
export default {
    
}
</script>
<style lang="less" scoped>
#contain {
    width: 30px;
    height: 180px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    opacity: 0;
    animation: fadeIn 1s 1;
    animation-fill-mode: forwards;
}

.wrap {
    animation: rotate 1000ms infinite ease-in-out alternate,
        zindex 2000ms infinite ease-in-out;
    position: absolute;
    z-index: 0;
}

.part {
    width: 15px;
    height: 15px;
    background: radial-gradient(
        circle at 0 0,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 0) 65%,
        rgba(0, 0, 0, 0.1) 65%,
        rgba(0, 0, 0, 0.1)
    );
    background-color: #e3746b;
    border-radius: 50%;
    animation: scale 1000ms infinite ease-in-out alternate;
    animation-delay: -500ms;
    transform: scale(0.5);
}

// .part:after {
//   content: '';
//   width: 100px;
//   height: 10px;
//   background: #eee;
//   position: absolute;
//   top: 130px;
//   border-radius: 50%;
// }

#wrap2 {
    animation-delay: -1000ms;
}

#part2 {
    background-color: #397bf9;
    animation-delay: -1500ms;
}

#wrap3 {
    animation-delay: -1500ms;
}

#part3 {
    background-color: #f4b400;
    animation-delay: -2000ms;
}

#wrap4 {
    animation-delay: -2500ms;
}

#part4 {
    background-color: #0f9d58;
    animation-delay: -3000ms;
}

@keyframes rotate {
    100% {
        transform: translateX(25px);
    }
}
@keyframes scale {
    100% {
        transform: scale(1);
    }
}
@keyframes zindex {
    25% {
        z-index: 1;
    }

    75% {
        z-index: -1;
    }
}
@keyframes fadeIn {
    100% {
        opacity: 1;
    }
}
</style>
